<template>
<div>
  <!-- 搜索框 -->
  <div class="inputbox">
       <el-input
            placeholder="请输入文章标题关键字"
            v-model="searchcontent"
            clearable
           
            
          >
            <el-button
              slot="append"
              icon="el-icon-search"
             
            ></el-button>
     </el-input>
  </div>

  <!-- 搜索列表 -->
  <div class="search" v-if="this.searchList.length!==0">
      <ul class="searchul">
        <li class="searchli" v-for="(item) in searchList" :key="item.id" @click="router(item.id)">
         <span>{{item.title}}</span>
        </li>
        
  </ul>
  </div>

 <!-- 文章列表 -->
   <ul >
     <li v-for="(item) in articleList" :key="item.id" >
      <!-- 标题 -->
      <p class="title">     
          {{item.title}} 
            <el-button type="primary" icon="el-icon-edit" circle class="delbtn" @click="Edit(item.id,item.author)"></el-button>
          <el-button type="danger" icon="el-icon-delete" class="delbtn" circle @click="Del(item.id,item.author)"></el-button>
      </p>
      
    <!-- 整体盒子 -->
     <div class="textbox">
       <!-- 文章内容 -->
       <div class="contentText">
       <!-- <router-link :to= "{ path: 'toarticle', query: { id: item.author }}" >跳转</router-link> -->
       <p class="contenti" v-html="item.content" @click="router(item.id)" >{{item.content}}</p>
       </div>
        <div class="footer">
          <!-- 头像 -->
        <div class="pimg"  >
          
          <img :src="getimg(item.authorimg)" height="30px" width="30px" />
        </div>
        <!-- 时间和昵称 -->
        <div class="other">
          <p class="user">{{item.author}}</p>
         <p class="time">{{item.time}} </p>
        </div>
       
        </div>
        
      </div>

      
    </li>

  </ul>
</div>
  
</template>
<script>
export default {
  data(){
    return{
      articleList:[],
      imglist:[],
      searchcontent:"",
      searchList:[],
      timeId:-1
    }
  },
  created(){
    this.getList();
 
  },
  // 可以实时监听输入框值的改变
  watch:{
    searchcontent(e){
      // 当没有输入值的时候
     if(!e.trim()){
       clearTimeout(this.timeId);
       this.timeId=setTimeout(()=>{
         this.searchList=[]
       },500);
       return;
     }
     clearTimeout(this.timeId);
     this.timeId=setTimeout(()=>{
       this.getsearch(e);
     },1000)
    }
  },
  methods:{
    // 获取文章列表
  getList(){
this.$axios.get("/app/login/getarticle"
).then((res)=>{
  //console.log(res);
  this.articleList=res.data;
})
    },
// 获取头像
 getimg(x){

 if(x==null||x==""){
    return require("../assets/original.png");
 }else{
    return require("../../server/upload/"+x);
 }
  
  },
  // 切换路由
  router(id){
    // console.log(id);
   this.$router.push({name:'toarticle',params:{id:id}});

  },
  // 删除文章
  Del(xid,xname){
   
    let xname2=parseInt(xname);
    var xlog=parseInt(window.sessionStorage.getItem("token")); 
    if(xlog!==xname2){
      this.$message.error("您无权删除别人的文章！");
    }else{
      this.$axios.post("/app/login/delarticle",{
        yid:xid
      }).then((res)=>{
        if(res.data.state==201){
          this.$message.success("删除成功！");
          this.$router.go(0);
        }
      })
    }

  },
  // 编辑文章
  Edit(editid,xname){
    let xname2=parseInt(xname);
    var xlog=parseInt(window.sessionStorage.getItem("token")); 
    if(xlog!==xname2){
      this.$message.error("您无权编辑别人的文章！");
    }else{
      this.$router.push({name:'editarticle',params:{editid:editid}});
    }
    
  },
  // 获取搜索题目
  getsearch(atriclename){
    this.$axios.get("/app/login/getname",{
      params:{
        xname:atriclename
      }
    }).then((res)=>{
      console.log(res);
      this.searchList=res.data;
    })
      
    
  }
  }
}
</script>
<style scoped>
 li{
  width: 800px;
  height: 200px;
  background-color: #fff;
  list-style-type: none;
  /* border-bottom: 1px crimson solid; */
  border-radius: 5px;
  cursor: pointer;

}
.contenti:hover{
  background-color: #dadbe0;
}
.title{
  /* background-color: rgb(187, 39, 39); */
  padding: 0px;
text-align: left;
height: 50px;
line-height: 40px;
font-size: 20px;
font-weight: bold;
padding-left: 20px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;

}
.delbtn{
  float: right;
 margin: 5px;
}
.textbox{
  display: flex;
  flex-direction: column;
  justify-content:space-between;


}
.contentText{
  flex: 1;
  background-color: #fff;

}
.contenti{
  overflow: hidden;
 display:-webkit-box;
  -webkit-box-orient:  vertical;   /* 定义为竖向编排显示 */
 -webkit-line-clamp:  2; /* 限制一个块元素显示的文本行数*/
overflow: hidden;
line-height: 20px;
text-overflow: ellipsis;
text-align: left;/* 让文字对齐 */
color: #999aaa;
font-size: 10px;
font-family:Arial,Helvetica,sans-serif;

}
.footer{
  flex: 1;
  display: flex;
  justify-content: space-between;
 line-height: 20px;
}
.pimg{
flex:1 ;
background-color: #fff;
padding-top: 15px;

}
.other{
  flex: 5;
  display: flex;
  justify-content:flex-end;
  background-color: #fff;
 
}
.user{
  flex: 5;
  background-color: #fff;
 margin-left: 20px;
 text-align: right;
}
.time{
  flex: 1;
}
.el-input {
  width: 600px;
 margin-left: -274px;
 height: auto;
 position: relative;
 /* background-color: #fe6b00; */
}
/* 加一个外边框来限制输入框的左边距 */
.inputbox{
  /* background-color: #fe6b00; */
  width: 700px;
margin-left: 250px;
}
.search{
  display: block;
  position: absolute;
  z-index: 1000;
     
    border: 1px solid #409eff;
    border-top: none;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    /* transform: translateY(-2px); */
    background: #fff;
    margin-top: -60px;
    width: 540px;
   left: 383px;
    height: auto;
}

.searchli{
  height: 30px;
  width: inherit;
  /* background-color: antiquewhite; */
  line-height: 40px;
  text-align: left;
  margin-left: -40px;
  /* border-top: #fe6b00 1px solid; */
  margin-top: -15px;
  margin-bottom: 15px;
  padding: 5px;
}
.searchli:hover{
  background-color: #f0f0f5;
}

</style>
